iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
2
自我挑戰組

網頁學習紀錄系列 第 20

鐵人賽 Day20 向 KKBOX致敬-嵌入 youtube 連結

  • 分享至 

  • xImage
  •  

音樂網頁一定要有影音可以聽,這次來分享怎麼把 youtube 影片嵌入網頁中,
預計畫面如下:
https://ithelp.ithome.com.tw/upload/images/20190923/20119300hyNyY1RLcn.png

看起來好像很難,是不是要寫什麼播放語法,還是怎麼寫入影片啊...
其實不難,首先我們打開 youtube 找到一首喜歡的影片,選擇「分享」這個選項
https://ithelp.ithome.com.tw/upload/images/20190923/201193009TihrtXkxo.png

再來會看到一排分享的選擇,選擇嵌入
https://ithelp.ithome.com.tw/upload/images/20190923/20119300NYCaJX3f6M.png
OS. 對了!這個字念「千」,不要再唸「砍」了...

https://ithelp.ithome.com.tw/upload/images/20190923/20119300HjSREDKFJu.png
左邊會有縮圖,右邊則是一串語法,將這段語法放進 HTML 後就完成了!!
注意到一個地方,可以自行設定寬度跟高度

<iframe width=**"560"** height=**"315"** src="https://www.youtube.com/embed/HK7SPnGSxLM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

可以依照自己版面需要調整合適的寬度,記得,只要改這兩個數值就可以了,其他不要動喔~~

這次的 SCSS 寫法跟之前三欄式列表寫法一樣,這邊就不重新贅述了,

codepen連結
https://codepen.io/hnzxewqw/pen/YzKBXWR


上一篇
鐵人賽 Day19 向 KKBOX致敬-用 ul li 寫一個左右欄的圖文列表
下一篇
鐵人賽 Day21 向 KKBOX致敬-在 footer 中使用 position 固定在底部
系列文
網頁學習紀錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言